import Head from "next/head";
import { GetServerSideProps } from "next";
import storeWrapper, { IAppRootState } from "../../store";
import {
  fetchAllProductAction,
  fetchHomeInfoAction,
  fetchHotProductAction,
  fetchSearchSuggest,
} from "../../store/modules/homeStore";
import SwiperBanner from "../../components/swiper-banner";
import { useSelector } from "react-redux";
import { FC, memo, ReactElement } from "react";
import TabCategory from "../../components/tab-category";
import Recommend from "../../components/recommend";
import SectionTitle from "../../components/section-title";
import ShopItem from "../../components/shop-item";
import { HomeWrapper } from "@/styles/home";
import DigitalAlbum from "../../components/digital-album";

interface IProps {
  children?: ReactElement;
}
const Home: FC<IProps> = (props: IProps) => {
  const {
    banners,
    categorys,
    recommends,
    hotProduct,
    digitalData,
    allProduct,
  } = useSelector((rootState: IAppRootState) => {
    return {
      banners: rootState.home.banners,
      categorys: rootState.home.categorys,
      recommends: rootState.home.recommends,
      hotProduct: rootState.home.hotProduct,
      digitalData: rootState.home.digitalData,
      allProduct: rootState.home.allProduct,
    };
  });
  return (
    <HomeWrapper>
      <Head>
        <title>云音乐商城</title>
        <meta
          name="keywords"
          content="数码影音，beats耳机，击音耳机，漫步者，akg，潮牌，T恤，音乐生活，食品，服饰配件，礼品，礼物，礼盒，鲜花，ip周边，云音乐，商城，云贝"
        />
        <meta
          name="description"
          content="云音乐商城是专注于音乐场景打造的音乐购物平台，包含音乐人周边、3c影音数码、音乐市集等，和我们一起让音乐购有趣，给生活加点料"
        />
      </Head>
      {/* 轮播图 */}
      <SwiperBanner bannerLists={banners} />
      {/* 中间分类 */}
      <TabCategory categorys={categorys} />
      {/* recommend部分 */}
      <Recommend recommends={recommends} />
      {/* 编辑推荐 */}
      <div className="editor">
        <SectionTitle title="编辑推荐" />
        <div className="items">
          {hotProduct.map((item) => {
            return <ShopItem items={item.products} key={item.id} />;
          })}
        </div>
      </div>
      {/* 数字专辑 */}
      <DigitalAlbum digitalData={digitalData} />
      {/* 热门商品 */}
      <div className="hotCommodity">
        <SectionTitle title="热门商品" />
        <div className="items">
          {allProduct.map((item) => {
            return <ShopItem shops={item} key={item.id} />;
          })}
        </div>
      </div>
    </HomeWrapper>
  );
};

export default memo(Home);

// 发送网络请求;
export const getServerSideProps: GetServerSideProps =
  storeWrapper.getServerSideProps(function (store) {
    return async (context) => {
      await store.dispatch(fetchSearchSuggest());
      await store.dispatch(fetchHomeInfoAction());
      await store.dispatch(fetchHotProductAction());
      await store.dispatch(fetchAllProductAction());
      return {
        props: {},
      };
    };
  });
